@inject('appRepository', 'App\Repositories\AppRepository')
@php
    $banner =  $appRepository->getPictureByColumn(5,['文章列表','banner']);
    $right = $appRepository->getPictureByColumn(5,['文章列表','右侧广告位']);
@endphp
@extends('layouts.app')
@section('title','游记列表')
@section('content')
    @if($banner&&count($banner))
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                @foreach($banner as$key=> $item)
                    <li data-target="#myCarousel" data-slide-to="0" class="{{$key===0?'active':''}}"></li>
                @endforeach
            </ol>
            <div class="carousel-inner" >
                @foreach($banner as $key=>$item)
                    <div class="carousel-item {{$key===0?'active':''}}">
                        <img class="img-fluid"
                             src="{{$item->content_detail->asset->path}}"
                        >
                        {{--<div class="container">--}}
                        {{--<div class="carousel-caption text-left">--}}
                        {{--<h1>{{$item->title}}</h1>--}}
                        {{--</div>--}}
                        {{--</div>--}}
                    </div>
                @endforeach
            </div>
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

    @endif
    <div class="container-fluid page-product">
        {{--      banner     --}}
        <div class="container py-5" style="min-height: 600px">
            <div class="hot-box">
                {{--     主要body           --}}
                <div class="hot-body row">
                    {{--                    左侧布局--}}
                    <div class="col">
                        {{--     内容体                   --}}
                        <div class="content-body">
                            {{--            景点图片                --}}
                            <div class="hot-box">
                                <div class="hot-title mb-4">
                                    <div class="hot-title-bar"><span class="star-title-icon"></span>{{$category->name}}</div>
                                </div>
                            <div class="row ">
                                @foreach($contents as $note)
                                    <div class=" col-12">
                                        <div class="content-item">
                                            <div class="media">
                                                @if($note->content_detail->asset)
                                                <div class="content-item-head mr-3">
                                                    <img class="w-100 rounded"  src="{{$note->content_detail->asset->path}}" alt="">
                                                </div>
                                                @endif
                                                <div class="media-body">
                                                    <a href="{{url('/content/'.$note->id)}}">
                                                        <div class="side-item-body-title">
                                                            <h5 class="mt-0">{{$note->content_detail->title}}</h5>
                                                        </div>
                                                    </a>
                                                    {{$note->content_detail->sub_title}}
                                                    <div class="content-item-body-tag">
                                                        @if($note->tags)
                                                            @foreach(json_decode($note->tags) as $item)
                                                                <div class="tag-item">{{$item}}</div>
                                                            @endforeach
                                                        @endif
                                                    </div>
                                                    <div class="content-item-bottom">
                                                        <div class="left-content"> 发布时间：{{$note->created_at}}</div>
                                                        <div class="right-content">{{$note->view_count}}人已读</div>
                                                    </div>
                                                    <hr>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            </div>
                            {{--            分页器                --}}
                            {{ $contents->links('layouts.page') }}
                        </div>
                    </div>
                    {{--                    右侧布局 --广告位--}}
                    @if(count($right))
                    <div class="col-lg-2 d-none d-lg-block">
                        <div class="hotbox-left pb-3">
                            @foreach($right as $item)
                                <a href="{{$item->content_detail->point_url?url($item->content_detail->point_url):'#'}}">
                                    <div class=" hotbox-left-bg  w-100 rounded"
                                         style="height: 300px;margin-bottom: 20px;
                                             background-image: url({{$item->content_detail->asset->path}})">
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    </div>
                        @endif
                </div>
            </div>
        </div>

    </div>
@endsection
